<template>
	<div>
		<div style="margin-bottom: 70px;">
			<!-- 顶部导航栏 -->
			<van-nav-bar title="本店铺车辆" style="background-color: #00ffff;">
				<template #right>
					<van-popover v-model:show="showPopover" theme="dark" :actions="addAction" placement="bottom-end"
						@select="handleSelect">
						<template #reference>
							<van-icon name="bars" size="25" />
						</template>
					</van-popover>
				</template>
			</van-nav-bar>
			<div>
				<!-- 搜索 -->
				<div style="display: flex; align-items: center; margin-left: 10px;">
					<van-search v-model="search.value" shape="round" show-action placeholder="查找本店铺车辆"
						style="width: 100%;">
						<template #action>
							<div @click="onSearch">搜索</div>
						</template>
					</van-search>
				</div>
				<!-- 车辆列表 -->
				<van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了"
					@load="onLoad">
					<div class="car-list" v-for="(car,index) in usedcarList" :key="index">
						<div style="display: flex; flex-direction: row;" @click="onCarDetail(car.id)">
							<div>
								<van-image width="160px" height="100px" fit="contain" v-bind:src="car.img" />
							</div>
							<div style="display: flex; flex-direction: column; justify-content: space-between">
								<p class="car-list-title">{{car.carBrand}} {{car.carSeries}} {{car.carYear}}
									{{car.carDisplacement}}
									{{car.engine}}
									{{car.carVersion}} {{car.transmission}}
								</p>
								<p class="car-list-info">{{car.licenseTime}}/{{car.driveMileage}}万公里</p>
								<div style="width: 100%; display: flex; justify-content: center;">
									<p class="car-list-price">{{car.price}} 万</p>
									<div
										style="width: 100%; display: flex; justify-content: flex-end; margin-right: 10px;">
										<van-icon name="weapp-nav" size="25" @click.stop="handleOperation(car.id)" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
			<!-- 操作弹出框 -->
			<van-action-sheet v-model:show="actionSheetShow" :actions="actions" cancel-text="取消"
				close-on-click-action />
		</div>
		<my-tabbar :active="tabbarName"></my-tabbar>
	</div>
</template>

<script>
	export default {
		//局部刷新
		inject: ["reload"],
		data() {
			return {
				tabbarName: "home", //底部导航栏名称
				pageRequest: {
					currentPage: 1,
					pageSize: 1000,
					params: {}
				},
				//搜索关键字
				search: {
					value: ""
				},
				//商家id
				sellerId: 0,
				//车辆列表
				usedcarList: [],
				state: {
					finished: false,
					loading: false
				},
				theCarId: 0,
				//操作面板
				actionSheetShow: false,
				addAction: [{
					text: '添加车辆',
					icon: 'add-o'
				}],
				showPopover: false,
				actions: [{
						name: '修改车辆信息',
						color: '#409EFF',
						callback: () => {
							this.handleEditCar()
						}
					},
					{
						name: '删除该车辆！',
						color: '#F56C6C',
						callback: () => {
							this.handleDeleteCar()
						}
					}
				]
			}
		},
		mounted() {
			this.sellerId = this.$cookies.get("seller").id
		},
		methods: {
			//搜索按钮
			onSearch() {
				this.pageRequest.params.searchName = this.search.value
				this.onLoad()
			},
			//自动刷新
			onLoad() {
				this.pageRequest.params.sellerId = this.sellerId

				let _this = this
				_this.$axios({
					method: 'post',
					url: '/usedcar/findAllBySellerId',
					data: _this.pageRequest
				}).then((resp) => {
					//添加车辆数据
					_this.usedcarList = resp.data.content
					// 加载状态结束
					_this.state.loading = false
					// 数据全部加载完成
					_this.state.finished = true

				})
			},
			//跳转到车辆详情页
			onCarDetail(carId) {
				this.$router.push({
					path: "/usedcar/detail",
					query: {
						id: carId
					}
				})
			},
			//跳转到添加车辆
			handleSelect(action, index) {
				if (index == 0) {
					this.$router.push({
						path: "/usedcar/add"
					})
				}
			},
			//点击车辆右下角按钮触发
			handleOperation(carId) {
				this.theCarId = carId;
				this.actionSheetShow = true
			},
			//跳转到修改车辆
			handleEditCar() {
				this.$router.push({
					path: "/usedcar/update",
					query: {
						carId: this.theCarId
					}
				})
			},
			//删除车辆
			handleDeleteCar() {
				this.$dialog.confirm({
					message: '确定删除车辆吗？'
				}).then(() => {
					let _this = this
					_this.$axios({
						method: 'delete',
						url: '/usedcar/delete/' + this.theCarId,
					}).then((resp) => {
						_this.$notify({
							type: "success",
							message: resp.msg
						})
						_this.reload()
					})
				}).catch(() => {
					console.log("取消操作")
				})
			}
		}
	}
</script>

<style scoped>
	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		width: 60%;
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 5px 0px;
	}
</style>
